@import url('./变量.less');

.container {
	width: 200px * 2;
	height: 10% + 100px;
	background-color: @mainColor;
	.box {
		width: 100px;
		height: 100px;
		background-color: @mainBgc;
		a {
			color: @mainColor;
			&:hover {
				color: @mainBgc;
			}
		}
	}
}

.nowrap_ellipsis {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.box_border(@borderWidth: 5px, @boderColor: purple) {
	border: @borderWidth solid @boderColor;
}
// 混入和映射一起使用
.box_size {
	width: 200px;
	height: 100px;
}

.box1 {
	margin-top: 20px;
	// .box_size() 获取的是对象 [width]:获取的对象的属性值
	width: .box_size() [width];
	background-color: @mainBgc;
	.nowrap_ellipsis();
	.box_border(10px, #00f);
}
.box2 {
	width: 150px;
	background-color: @mainColor;
	.box_border();

	&:extend(.nowrap_ellipsis);
}

.box1 {
	// 颜色值转换为rgb
	color: color(skyblue);
	width: convert(100px, 'in');
}
